<template>
    <div>
        <el-table :data="reportList" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column label="工作内容">
                <template slot-scope="scope">
                    <p class="line_1">{{ scope.row.conents }}</p>
                </template>
            </el-table-column>
            <el-table-column label="工作中存在的问题">
                <template slot-scope="scope">
                    <p class="line_1">{{ scope.row.problem }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="本周开始日期" />
            <el-table-column prop="endTime" label="本周结束日期" />
            <el-table-column prop="subTime" label="提交日期" />
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span>{{ getState(scope.row.state) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="评分">
                <template slot-scope="scope">
                    <p>{{ scope.row.score || '暂无' }}</p>
                </template>
            </el-table-column>
            <el-table-column label="批阅评语">
                <template slot-scope="scope">
                    <p class="line_1">{{ scope.row.remark || '暂无' }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-link type="primary" @click="toDetails(scope.row)" class="link">查看详情</el-link>
                    <el-link type="success" @click="toExami(scope.row)" :disabled="scope.row.state != 0">审核</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background layout="prev, pager, next" :total="reportTotal" :page-size="pagesize" @current-change="cheangePage"/>
        </div>
        <el-dialog title="周报详情" :visible.sync="showDetails" width="40%" :before-close="() => { showDetails = false }">
            <el-form ref="form" :model="diaInfo" label-width="140px">
                <el-form-item label="工作内容：">
                    <p class="conents">{{ diaInfo.conents }}</p>
                </el-form-item>
                <el-form-item label="工作中存在的问题：">
                    <p class="conents">{{ diaInfo.problem }}</p>
                </el-form-item>
                <el-form-item label="评分">
                    <el-rate v-model="diaInfo.score" :colors="colors" allow-half disabled />
                </el-form-item>
                <el-form-item label="批阅评语">
                    <p class="conents">{{ diaInfo.remark || '暂无' }}</p>
                </el-form-item>
                <el-form-item label="批阅时间">
                    <p class="conents">{{ diaInfo.respond_time || '暂无' }}</p>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="周报审核" :visible.sync="showExami" width="40%" :before-close="() => { showExami = false }">
            <el-form ref="form" :model="form" :rules="rules" class="form" label-width="80px">
                <el-form-item label="评分" prop="score">
                    <el-rate v-model="form.score" :colors="colors" allow-half />
                </el-form-item>
                <el-form-item label="评阅评语" prop="remark">
                    <el-input type="textarea" :rows="10" v-model="form.remark" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">立即创建</el-button>
                    <el-button @click="$refs.form.resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    name: 'WebStudentWeekly',
    data() {
        return {
            page: 0,            // 页码
            pagesize: 14,       // 单页数据量
            showDetails: false, // 是否显示详细信息
            showExami: false,   // 是否显示审核表单
            diaInfo: {},        // 详情
            form: {
                score: 0,       // 评分
                remark: '',     // 评语
            },
            rules: {
                score: { required: true, message: '请输入账号' },
                remark: { required: true, message: '请输入账号' },
            },
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        };
    },
    computed: {
        ...mapState('Report', ['reportList','reportTotal']),
        getState() {
            return (state) => {
                switch (state) {
                    case 0: return '待审阅';
                    case 1: return '审核通过';
                    case 2: return '已驳回';
                }
            }
        },
    },
    methods: {
        ...mapActions('Report', ['getReportList', 'remark']),
        toDetails(e) {
            this.showDetails = true;
            this.diaInfo = e;
        },
        toExami(e) {
            this.showExami = true;
            this.diaInfo = e;
        },
        submit() {
            this.$refs.form.validate((valid) => {
				if (valid) {
                    this.showExami = false;
                    this.form.id = this.diaInfo.id;
                    this.remark(this.form).then(res => {
                        this.getData();
                    })
				}
			})
        },
        cheangePage(e) {
            this.page = --e;
            this.getData();
        },
        getData() {
            let { page,pagesize } = this;
            let teacher_id = this.$cookies.get('userInfo').id;
            this.getReportList({ page,pagesize,teacher_id });
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";
.link {
    .mar_r(10px);
}
.conents {
    .max_h(300px);
    .over_y();
    .c(#888);
}
.conents::-webkit-scrollbar {
    width: 0 !important
}
.el-rate {
    .h(40px);
    .df();
    .f_ai();
}
.page {
    .pos_f();
    .pos_rb(20px,20px);
}
</style>